<template>
  <div class="videos">
    <div class="panel">
      <div class="left">
        打开摄像头
        <el-switch class="switch" :value="video" @change="videoChange">
        </el-switch>
        自动保存
        <el-switch class="switch" :value="autoSave" @change="autoSaveChange">
        </el-switch>
      </div>
      <div class="right">
        <el-select
          class="select"
          value-key="name"
          size="samall"
          v-model="comIndex"
          @change="comChange"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, index) in comList"
            :key="item.path"
            :label="item.path"
            :value="index"
          >
          </el-option>
        </el-select>
        <el-button class="btn" size="samall" type="primary" @click="getComList"
          ><div class="iconfont icon-shuaxin icon"></div>
          获取串口列表</el-button
        >
        <div>
          <el-switch
            class="switch"
            :value="comState"
            @change="connectSeriaport"
          >
          </el-switch>
        </div>
        <!-- <el-button
          class="btn"
          size="samall"
          type="primary"
          @click="connectSeriaport"
          >连接</el-button
        > -->
      </div>
    </div>
    <div class="main">
      <div class="left">
        <div style="display: flex;">
          <div class="video">
            <video id="video" autoplay></video>
            <div class="mask" v-if="!video">
              暂未连接摄像头
            </div>
            <fragment v-for="(item, index) in videoBoxList" :key="index">
              <img
                v-if="video"
                class="video-box"
                :style="{
                  Transform: `translate(${item.x}, ${item.y}) rotate(${90 *
                    index}deg)`,
                  top: item.top + 'px',
                  left: item.left + 'px',
                }"
                src="../../assets/video-box.png"
                alt=""
              />
            </fragment>
          </div>
          <div class="column">
            <div class="row">
              <el-button class="btn" size="samall" type="primary" @click="photo"
                ><i class="iconfont icon-zhaoxiang icon"></i> 拍照</el-button
              >
              <el-button
                class="btn"
                size="samall"
                type="default"
                @click="clear"
              >
                清空图片</el-button
              >
            </div>
            <div class="row">
              <el-button
                class="btn"
                size="samall"
                type="default"
                @click="openDirectory"
              >
                临时目录</el-button
              >
            </div>
            <div class="row">
              裁剪设置:
            </div>
            <div class="row">
              宽:
              <el-input
                class="input"
                size="small"
                :value="videoBoxWidth"
                @input="videoBoxChange('width', $event)"
                @blur="videoBoxBlur('width')"
              ></el-input>
              高:
              <el-input
                class="input"
                size="small"
                :value="videoBoxHeight"
                @input="videoBoxChange('height', $event)"
                @blur="videoBoxBlur('height')"
              ></el-input>
            </div>
            <div class="row">
              <el-button
                class="btn"
                size="samall"
                type="primary"
                @click="saveVideoBox"
              >
                保存</el-button
              >
            </div>
            <div class="row">
              <el-select
                class="select"
                value-key="name"
                size="small"
                v-model="templateIndex"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in templates"
                  :key="item.name"
                  :label="item.name"
                  :value="index"
                >
                </el-option>
              </el-select>
              <el-button
                class="btn"
                size="samall"
                type="default"
                @click="handler"
              >
                处理图片</el-button
              >
            </div>
          </div>
        </div>
        <div class="title">
          <p class="left">相册</p>
          <p class="right">{{ imgs.length }}张</p>
        </div>
        <div class="content">
          <div class="nodata" v-show="!imgs.length">
            <img class="icon" src="../../assets/nodata.png" alt="" />
            <p class="text">暂无相册内容</p>
          </div>
          <div class="imgs" v-show="imgs.length">
            <div class="img-box" v-for="(item, index) in imgs" :key="index">
              <!-- <img class="img" :src="item.src" alt="" /> -->
              <i class="el-icon-close icon" @click="imgDelete(index)"></i>
              <el-image
                class="img"
                :src="item.url"
                :preview-src-list="preList"
                :initial-index="index"
                fit="contain"
              >
              </el-image>
              <p>{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="row">
          <el-button
            class="btn"
            size="samall"
            type="default"
            @click="exportImgs"
          >
            导出</el-button
          >
          <el-button
            class="btn"
            size="samall"
            type="default"
            @click="exportDialog = !exportDialog"
            >导出设置</el-button
          >
        </div>
        <div class="sticky">
          <el-scrollbar class="List">
            <div class="Table">
              <div class="t-row t-head">
                <div class="t-column-1">项目</div>
                <div class="t-column-2">结论</div>
              </div>
              <div
                class="t-row"
                v-for="(item, index) in exportExcelData"
                :key="index"
                @click="activeChange(index)"
              >
                <div class="t-column-1" :title="item[0]">
                  {{ item[0] }}
                </div>
                <div class="t-column-2" :title="item[1]">{{ item[1] }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>

    <el-dialog
      title="设置"
      :visible.sync="exportDialog"
      :before-close="beforeClose"
    >
      <el-form
        class="form"
        label-position="right"
        label-width="100px"
        :model="form"
      >
        <el-form-item label="文件夹名称">
          <div class="item">
            <el-input v-model="form.mkdir"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="输出目录">
          <div class="item">
            <el-input
              v-model="form.path"
              :title="form.path"
              disabled
            ></el-input>
            <el-button class="btn" type="default" @click="selectPath"
              >浏览</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="beforeClose(() => (exportDialog = false))"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="saveExport(() => (exportDialog = false))"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
      class="imgDialog"
      :title="imgDialogData.name"
      :visible.sync="imgDialog"
      top="10vh"
    >
      <div class="imgDialogMain">
        <el-image class="img" :src="imgDialogData.url" fit="contain"></el-image>
        <el-input
          class="input"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="imgDialogData.text"
        >
        </el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="imgDialog = !imgDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="saveImgResult(() => (imgDialog = false))"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div v-show="false">
      <!-- <HPV ref="HPV"></HPV> -->
      <STD ref="STD"></STD>
    </div>
  </div>
</template>

<script>
const { SerialPort } = require("serialport");
const { ipcRenderer } = require("electron");
import { getMessage, subInvoke } from "../../utils/subprocess";
import { parseTime, throttle, debounce } from "../../utils/index";
// import HPV from "../opencv/opencv.vue";
import STD from "../opencv/STD.vue";
import { resolve } from "dns";
// import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      templates: [
        // {
        //   name: "HPV",
        // },
        {
          name: "STD",
        },
      ],
      exportExcelData: [],
      exportExcelDataFrom: "",
      templateIndex: 0,
      comIndex: "",
      comList: [],
      comState: false,
      video: false,
      autoSave: true,
      observeDeviceing: false,
      camera: null,
      cameraSetting: null,
      imgs: [],
      preList: [],
      videoBoxWidth: 0,
      videoBoxHeight: 0,
      exportDialog: false,
      form: {
        mkdir: "",
        path: "",
      },
      oldForm: {
        mkdir: "",
        path: "",
      },
      videoBoxList: [],
      temp: "",
      count: 1,
      imgDialog: false,
      imgDialogData: {
        name: "",
        url: "",
        text: "",
      },
    };
  },
  // computed: {
  //   ...mapState("com", ["port"]),
  // },
  watch: {
    imgs(val) {
      if (val.length) {
        this.preList = val.map((v) => v.url);
        // this.$refs.HPV.fileList = val;
        // this.$refs.HPV.compareIndex = this.$refs.STD.fileList.length - 1;
        this.$refs.STD.fileList = val;
        this.$refs.STD.compareIndex = this.$refs.STD.fileList.length - 1;
      } else {
        this.preList = [];
        // this.$refs.HPV.fileList = [];
        // this.$refs.HPV.compareIndex = "";
        this.$refs.STD.fileList = [];
        this.$refs.STD.compareIndex = "";
      }
    },
  },
  mounted() {
    this.getComList();

    subInvoke("temp").then((res) => {
      this.creatMkdir(res, "cross-temp-imgs").then((base) => {
        const date = parseTime(new Date(), "{y}-{m}-{d}");
        this.creatMkdir(base, date).then((p) => {
          this.temp = p;
        });
      });
    });

    let mkdirName = localStorage.getItem("mkdir") || "导出图片";
    let savePath = localStorage.getItem("savePath");

    if (!savePath) {
      const path = require("path");

      const desktopPath = path.join(require("os").homedir(), "Desktop");

      savePath = desktopPath;
    }

    this.form = {
      mkdir: mkdirName,
      path: savePath,
    };
    this.oldForm = {
      mkdir: mkdirName,
      path: savePath,
    };

    this.videoBoxWidth = localStorage.getItem("videoBoxWidth") || 160;
    this.videoBoxHeight = localStorage.getItem("videoBoxHeight") || 160;
    this.getVideoBoxList();

    getMessage("Com-open", (e, data) => {
      console.log("Serial port is open");
      this.$message({
        message: `已连接串口${this.comList[this.comIndex].path}`,
        type: "success",
      });
      this.comState = true;
    });

    getMessage("Com-data", (e, data) => {
      console.log("Received data:", "收到信号");
      this.photo();
    });

    getMessage("Com-error", (e, data) => {
      console.log("error data:", data);
      this.comState = false;
    });
  },
  beforeDestroy() {
    ipcRenderer.send("COM_CLOSE_ACTION");
    this.observeDevice(false);
  },
  components: {
    // HPV,
    STD,
  },
  methods: {
    async handler() {
      const name = this.templates[this.templateIndex].name;

      const ref = this.$refs[name];

      await ref.handler();

      console.log("图片处理完成", ref.exportExcelData);
      // 图片处理完成
      const data = ref.exportExcelData.map((v) => {
        return [v[0], v[1]];
      });

      this.exportExcelData = data;
      this.exportExcelDataFrom = name;
    },
    saveImgResult(callback) {
      const i = this.exportExcelData.findIndex((v) => {
        if (v[0] === this.imgDialogData.name) {
          return true;
        }
      });

      this.exportExcelData[i][1] = this.imgDialogData.text;

      callback();
      setTimeout(() => {
        this.imgDialogData = {
          name: "",
          url: "",
          text: "",
        };
      }, 200);
    },
    activeChange(index) {
      const name = this.exportExcelData[index][0];

      const i = this.imgs.findIndex((v) => {
        if (v.name === name) {
          return true;
        }
      });
      if (i !== -1) {
        this.imgDialogData.name = this.exportExcelData[index][0];
        this.imgDialogData.url = this.imgs[i].url;
        this.imgDialogData.text = this.exportExcelData[index][1];
        this.imgDialog = true;
      }
    },
    getVideoBoxList() {
      const video = document.querySelector("#video");

      const width = video.clientWidth;
      const height = video.clientHeight;
      const center = {
        x: width / 2,
        y: height / 2,
      };
      const topLeft = {
        left: center.x - this.videoBoxWidth / 2,
        top: center.y - this.videoBoxHeight / 2,
        x: "0",
        y: "0",
      };
      const topRight = {
        left: center.x + this.videoBoxWidth / 2,
        top: center.y - this.videoBoxHeight / 2,
        x: "-100%",
        y: 0,
      };
      const BottomLeft = {
        left: center.x - this.videoBoxWidth / 2,
        top: center.y + this.videoBoxHeight / 2,
        x: "0",
        y: "-100%",
      };
      const BottomRight = {
        left: center.x + this.videoBoxWidth / 2,
        top: center.y + this.videoBoxHeight / 2,
        x: "-100%",
        y: "-100%",
      };
      this.videoBoxList = [topLeft, topRight, BottomRight, BottomLeft];
    },
    videoBoxChange(type, val) {
      const video = document.querySelector("#video");

      const width = video.clientWidth;
      const height = video.clientHeight;

      const result = val.replace(/[^0-9]/g, "");
      if (type == "width") {
        if (result) {
          if (result > width) {
            this.videoBoxWidth = width;
          } else {
            this.videoBoxWidth = result;
          }
        } else {
          this.videoBoxWidth = "";
        }
      } else if (type == "height") {
        if (result) {
          if (result > height) {
            this.videoBoxHeight = height;
          } else {
            this.videoBoxHeight = result;
          }
        } else {
          this.videoBoxHeight = "";
        }
      }
    },
    videoBoxBlur(type) {
      if (type == "width" && !this.videoBoxWidth) {
        this.videoBoxWidth = localStorage.getItem("videoBoxWidth") || 160;
      } else if (type == "height" && !this.videoBoxHeight) {
        this.videoBoxHeight = localStorage.getItem("videoBoxHeight") || 160;
      }
      this.getVideoBoxList();
    },
    saveVideoBox() {
      localStorage.setItem("videoBoxWidth", this.videoBoxWidth);
      localStorage.setItem("videoBoxHeight", this.videoBoxHeight);

      this.$message({
        message: `裁剪参数保存成功！`,
        type: "success",
      });
    },
    selectPath() {
      this.openFile({
        mothod: "openDirectory",
      }).then((path) => {
        console.log(path);
        if (path) {
          this.form.path = path;
        }
      });
    },
    beforeClose(next) {
      const { mkdir, path } = this.oldForm;
      this.form = {
        mkdir,
        path,
      };
      next();
    },
    saveExport(next) {
      const { mkdir, path } = this.form;

      this.oldForm = {
        mkdir,
        path,
      };
      localStorage.setItem("mkdir", mkdir);
      localStorage.setItem("savePath", path);

      next();
    },
    exportImgs() {
      if (!this.imgs.length) {
        this.$alert("请先完成图像采集", "提醒", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
        return;
      }

      const Loading = this.$loading({
        fullscreen: true,
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      setTimeout(() => {
        this.creatMkdir(this.form.path, this.form.mkdir, true)
          .then((path) => {
            console.log(path);
            for (let i = 0; i < this.imgs.length; i++) {
              const item = this.imgs[i];

              this.exportImg(path, item.url, item.name);
            }

            if (this.exportExcelData.length) {
              const ref = this.$refs[this.exportExcelDataFrom];

              ref.exportExcel(this.exportExcelData, path, ref.form.mkdir);
            }

            Loading.close();
          })
          .catch((err) => {
            Loading.close();
          });
      }, 100);
    },
    openDirectory() {
      subInvoke("openDirectory", this.temp);
    },
    autoSaveAction: debounce(function() {
      this.creatMkdir(this.form.path, this.form.mkdir)
        .then((path) => {
          console.log(path);
          for (let i = 0; i < this.imgs.length; i++) {
            const item = this.imgs[i];

            this.exportImg(path, item.url, i + 1);
          }
        })
        .catch((err) => {});
    }, 5000),
    imgDelete(i) {
      this.$confirm("确定要删除该图片吗?此操作不可撤销", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.imgs.splice(i, 1);
        })
        .catch(() => {});
    },
    clear() {
      this.count = 1;
      if (!this.imgs.length) {
        return;
      }

      this.$confirm("确定要清空图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.imgs = [];
        })
        .catch(() => {});
    },
    videoChange(e) {
      if (e) {
        this.start()
          .then(() => {
            this.video = e;
          })
          .catch(() => {
            this.video = false;
          });
      } else {
        if (this.camera) {
          this.camera.enabled = false;
          this.camera = null;
          this.video = e;
          this.observeDevice(false);
        }
      }
    },
    autoSaveChange(e) {
      this.autoSave = e;
      if (e) {
        this.$alert(
          "开启自动保存后,拍照信号结束5秒后会自动输出图片到指定目录",
          "提醒",
          {
            confirmButtonText: "确定",
            callback: (action) => {
              console.log("确定");
            },
          }
        );
      }
    },
    // ...mapActions("com", [
    //   "COM_CONNECT_ACTION",
    //   "COM_CLOSE_ACTION",
    //   "COM_CLOSEALL_ACTION",
    // ]),
    // comClose() {
    //   return new Promise((resolve, reject) => {
    //     if (this.port) {
    //       this.port.close((err) => {
    //         if (err) {
    //           console.error("Failed to close serial port:", err);
    //         } else {
    //           console.log("Serial port is closed");
    //         }
    //         resolve();
    //       });
    //     } else {
    //       resolve();
    //     }
    //   });
    // },
    getComList() {
      SerialPort.list().then((list) => {
        console.log(list);
        this.comList = list;

        const value = localStorage.getItem("comValue");

        if (value) {
          const i = list.findIndex((v) => {
            return v.path === value;
          });
          if (i !== -1) {
            this.comIndex = i;
          } else {
            this.comIndex = list.length - 1;
          }
        } else {
          this.comIndex = list.length - 1;
        }

        // console.log(this.comList[this.comIndex].path);

        this.connectSeriaport(true);
      });
    },
    comChange(val) {
      if (this.comState) {
        localStorage.setItem("comValue", this.comList[this.comIndex].path);
        this.connectSeriaport(true);
      }
    },
    async connectSeriaport(val) {
      if (this.comIndex === "") {
        this.$alert("请选择串口", "提醒", {
          confirmButtonText: "确定",
          callback: (action) => {
            console.log("确定");
          },
        });
        return;
      }

      if (val) {
        ipcRenderer.send("COM_CONNECT_ACTION", {
          path: "/" + this.comList[this.comIndex].path,
          baudRate: 9600, // 波特率
          dataBits: 8, //数据位
          parity: "none", //奇偶校验
          stopBits: 1, //停止位
          flowControl: false,
        });
      } else {
        ipcRenderer.send("COM_CLOSE_ACTION");
        this.comState = val;
      }
    },
    // 检查摄像头状态
    checkCameraStatus() {
      navigator.mediaDevices
        .enumerateDevices()
        .then((devices) => {
          const cameraDevices = devices.filter(
            (device) => device.kind === "videoinput"
          );
          if (cameraDevices.length === 0) {
            // 摄像头已断开
            this.video = false;
            console.log("摄像头已断开");
          } else {
            // 摄像头正常连接
            this.start().then(() => {
              this.video = true;
            });
            console.log("摄像头正常连接");
          }
        })
        .catch((error) => {
          // 处理错误
          console.error("获取设备信息失败:", error);
        });
    },
    observeDevice(flag) {
      if (flag) {
        if (this.observeDeviceing) {
          return;
        }
        navigator.mediaDevices.addEventListener(
          "devicechange",
          this.checkCameraStatus
        );
        this.observeDeviceing = true;
      } else {
        if (!this.observeDeviceing) {
          return;
        }
        navigator.mediaDevices.removeEventListener(
          "devicechange",
          this.checkCameraStatus
        );
        this.observeDeviceing = false;
      }
    },
    start() {
      return new Promise((resolve, reject) => {
        const video = document.getElementById("video");

        navigator.mediaDevices
          .getUserMedia({ video: true })
          .then((stream) => {
            video.srcObject = stream;
            this.camera = stream.getVideoTracks()[0];
            const setting = this.camera.getSettings();
            console.log(setting);
            this.cameraSetting = {
              height: setting.height,
              width: setting.width,
            };
            this.observeDevice(true);
            resolve();
          })
          .catch((err) => {
            console.log("Failed to start camera:", err);
            this.$message.error("设备连接失败");
            reject(err);
          });
      });
    },
    TempSave(path, src, name) {
      const date = parseTime(new Date(), "{y}年{m}月{d}日{h}时{i}分{s}");

      this.exportImg(path, src, name + "-" + date + '.png');
    },
    photo: throttle(function() {
      if (!this.camera) {
        this.$alert("请先打开摄像头", "提醒", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
        return;
      }

      const video = document.getElementById("video");
      const canvas = document.createElement("canvas");
      const ratioW = this.cameraSetting.width / video.offsetWidth;
      const ratioH = this.cameraSetting.height / video.offsetHeight;
      canvas.width = this.videoBoxWidth * ratioW;
      canvas.height = this.videoBoxHeight * ratioH;
      const point = this.videoBoxList[0];
      console.log(point);
      // document.querySelector(".imgs").appendChild(canvas);
      const ctx = canvas.getContext("2d");

      ctx.drawImage(
        video,
        point.left * ratioW,
        point.top * ratioH,
        this.videoBoxWidth * ratioW,
        this.videoBoxHeight * ratioH,
        0,
        0,
        this.videoBoxWidth * ratioW,
        this.videoBoxHeight * ratioH
      );

      const url = canvas.toDataURL("image/png");

      // console.log(url);

      this.imgs.push({
        name: this.count + '.png',
        url: url,
        type: "png",
      });

      this.TempSave(this.temp, url, this.count);
      this.count = this.count + 1;

      if (this.autoSave) {
        this.autoSaveAction();
      }
    }, 500),
    exportImg(basePath, url, name) {
      // console.log(basePath);
      // console.log(url);
      // console.log(name);

      // const url = canvas.toDataURL("image/png");

      const { writeFile } = require("fs");
      const path = require("path");

      // const desktopPath = path.join(require("os").homedir(), "Desktop");
      const imagePath = path.join(basePath, name);
      const base64 = url.replace(/^data:image\/\w+;base64,/, "");
      writeFile(imagePath, base64, "base64", (err) => {
        if (err) {
          console.error(`Failed to export image ${name}:`, err);
        } else {
          console.log(`Image ${name} exported successfully!`);
        }
      });
    },
    creatMkdir(basePath, name, flag = false) {
      const fs = require("fs");
      const path = require("path");
      return new Promise((resolve, reject) => {
        // const desktopPath = path.join(require("os").homedir(), "Desktop");

        const date = parseTime(new Date(), "{y}年{m}月{d}日{h}时{i}分");

        const newFolderPath = path.join(basePath, flag ? name + date : name);
        fs.access(newFolderPath, fs.constants.F_OK, (err) => {
          if (err) {
            console.log("Folder does not exist. Creating folder...");
            fs.mkdir(newFolderPath, { recursive: true }, (err) => {
              if (err) {
                console.log(err);
                reject();
              } else {
                console.log("ok!");
                resolve(newFolderPath);
              }
            });
          } else {
            console.log("Folder exists. Saving files...");
            resolve(newFolderPath);
          }
        });
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../styles/mixin.scss";
.videos {
  min-height: calc(100vh - #{$header-height});
  display: flex;
  flex-direction: column;
}
#video {
  height: 315px;
  width: 420px;
}
.btn {
  height: 32px;
  margin-left: 8px;
  padding: 0 16px;
  line-height: 16px;
  .icon {
    font-size: 13px;
    line-height: 13px;
  }
}
.panel {
  width: 100%;
  height: 64px;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 14px;
  color: #1d2129;
  line-height: s16px;
  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .switch {
    margin: 0 12px;
  }
  .select {
    width: 210px;
    height: 32px;
    border-radius: 2px 2px 2px 2px;
    padding: 0;
    /deep/ .el-input {
      height: 100%;
      .el-input__inner {
        height: 100%;
      }
    }
  }
}
.main {
  // $main-height: calc(100vh - #{$header-height} - 64px);
  // min-height: $main-height;
  // margin-top: 16px;
  width: 100%;
  background: #ffffff;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  > .right {
    flex: 1 1 auto;
    padding-left: 16px;
    // position: absolute;
    // right: 0;
    // top: 0;
    // bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /deep/ .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .row {
      display: flex;
      flex-direction: row-reverse;
    }

    .sticky {
      position: sticky;
      top: 0;
    }

    .List {
      height: calc(100vh - #{$header-height} - 64px - 32px - 32px - 16px);
      margin-top: 16px;
      // flex: 1 1 auto;
      width: 100%;

      .Table {
        width: 100%;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        color: #1d2129;

        .t-row {
          display: flex;
          flex-direction: row;
          align-items: center;
          background: #ffffff;
          cursor: pointer;
          &:not(:first-child) {
            border-top: 1px solid #ebecf0;
          }

          .t-column-1,
          .t-column-2 {
            padding-left: 16px;
            height: 48px;
            line-height: 48px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .t-column-1 {
            width: 80px;
          }
          .t-column-2 {
            width: 212px;
          }
        }
        .t-head {
          font-size: 14px;
          font-weight: 500;
          color: #4e5969;
          line-height: 20px;
          background: #f7f8fa;
          cursor: default;
        }
      }
    }
  }
  > .left {
    flex: 0 0 auto;
    // min-height: calc(#{$main-height} - 32px);
    width: 668px;
    border-right: 1px solid #e5e6eb;
    display: inline-flex;
    flex-direction: column;
  }
  .video {
    height: 315px;
    width: 420px;
    position: relative;
    .mask {
      height: 315px;
      width: 420px;
      z-index: 101;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #ffffff;
      line-height: 16px;
    }
    .video-box {
      position: absolute;
      height: 19px;
      width: 19px;
      z-index: 100;
    }
  }
  .column {
    display: flex;
    flex-direction: column;
    margin-left: 12px;

    .row {
      margin-top: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      white-space: nowrap;
      font-size: 14px;
      color: #1d2129;
      line-height: 22px;
      .select {
        width: 100px;
      }

      .btn:first-child {
        margin-left: 0;
      }
    }
    .input {
      margin: 0 8px;
    }
    .input /deep/ .el-input__inner {
      width: 60px;
    }
  }
  .title {
    margin-top: 16px;
    padding: 0 16px;
    height: 32px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #f7f8fa;
    .left {
      font-size: 14px;
      font-weight: 500;
      color: #1d2129;
      line-height: 16px;
    }
    .right {
      white-space: nowrap;
      font-size: 14px;
      color: #4e5969;
      line-height: 16px;
    }
  }
  .content {
    margin-top: 16px;
    width: 100%;
    .nodata {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon {
        height: 100px;
        width: 100px;
      }
      .text {
        margin-top: 8px;
        font-size: 14px;
        color: #4e5969;
        line-height: 16px;
      }
    }
    .imgs {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
      grid-gap: 8px;
      // flex-direction: row;
      // flex-wrap: wrap;
      .img-box {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        position: relative;
      }
      .icon {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
        font-size: 24px;
        color: #f56c6c;
        transform: translate(40%, -40%);
        cursor: pointer;
      }
      .img {
        flex: 0 0 auto;
        width: 100px;
        height: 100px;
        // margin: 6px;
      }
      p {
        margin: 0;
      }
    }
  }
}
.form {
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    /deep/ input {
      height: 32px;
      font-size: 14px;
      color: #86909c;
      line-height: 22px;
      padding-left: 12px;
    }
    .btn {
      width: 60px;
      height: 32px;
      border-radius: 2px 2px 2px 2px;
      margin-left: 12px;
    }
  }
}
.imgDialog {
  /deep/ .el-dialog__body {
    padding: 20px 0;
  }
}
.imgDialogMain {
  display: flex;
  flex-direction: column;
  align-items: center;
  .img {
    width: 400px;
    height: 400px;
    border-radius: 2px 2px 2px 2px;
  }
  .input {
    margin-top: 8px;
    width: 400px;
    // padding: 6px 12px;
    font-size: 14px;
    color: #1d2129;
    line-height: 16px;
  }
}
</style>
